<template>
    <div class="lgn_wrap">
        <div class="lgn_logn">
            <img class="lgn_img" :src="imgLogo">
        </div>
        <div class="lgn_form">
            <p class="lgn_tit">登录</p>
            <input class="lgn_ipt" type="text" v-model="loginForm.group_account" placeholder="请输入集团账号">
            <input class="lgn_ipt" type="text" v-model="loginForm.username" placeholder="请输入个人账号">
            <input class="lgn_ipt" type="text" v-model="loginForm.password" placeholder="请输入密码">
        </div>
        <button ref="submitRef" class="lgn_dlbtn_login" @click="loginSubmit()">登录</button>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';
import auth from "@/utils/auth";
import { login } from '@/api/app'
import imgLogo from "@/assets/img/logo.png"
import { showToast } from 'vant';

export default defineComponent({
    name: "login",
    components: {},
    setup() {
        const router = useRouter()
        onMounted(() => {
            //如果已登录跳转到首页
            if (auth.checkLogin(false)) {
                router.push({ path: '/index' });
            }
        });
        const loginForm = reactive({
            group_account: '',
            username: '',
            password: '',
        });
        const loginSubmit = async () => {
            const res = await login(loginForm)
            const data = res.data || {}
            auth.doLogin(data);
            showToast({
                message: '登录成功',
                duration: 2000,
                onClose: () => {
                    router.push({ path: '/' });
                }
            })
        }
        return {
            imgLogo,
            loginForm,
            loginSubmit,
        }
    }
});
</script>

<style scoped>
.lgn_wrap {
    position: absolute;
    min-height: 1100px;
    width: 100%;
    height: 100%;
    background: #fff;
    padding-bottom: 28px;
    overflow-y: scroll;

    .lgn_logn {
        margin-top: 55px;
        display: flex;
        justify-content: center;

        .lgn_img {
            width: 480px;
            height: 260px;
            margin-bottom: 100px;
        }

    }

    .lgn_form {
        padding: 0 46px;

        .lgn_tit {
            color: #76797C;
            margin-bottom: 30px;
            font-size: 32px;
        }

        .lgn_ipt {
            display: flex;
            width: 100%;
            border-radius: 16px;
            border: 1px solid #C1C1C1;
            height: 100px;
            margin-bottom: 54px;
            padding-left: 30px;
            color: #333B3B;
            font-size: 32px;
        }

        .lgn_ipt_yzmbox {
            align-items: center;
            justify-content: space-between;

            .lgn_ipt_yzm {
                border: none;
                color: #333B3B;
                font-size: 32px;
            }

            .lgn_yzm_btn {
                color: #00D8D4;
                font-size: 30px;
                font-weight: 400;
                height: 100px;
                border: none;
                background: transparent;
                padding: 0 20px;
                margin-top: 0em;
                white-space: nowrap;
            }

        }

        .lgn_tip {
            display: flex;
            font-size: 28px;
            margin-top: 24px;
            color: #999CA1;

            .lgn_tip_msg {
                padding-left: 14px;
            }

            .lgn_link {
                color: #00D8D4;
            }

        }
    }

    .lgn_dlbtn {
        position: absolute;
        bottom: 110px;
        left: 50%;
        transform: translateX(-50%);
        width: 658px;
        height: 100px;
        border: none;
        background-color: rgba(0, 216, 212, 0.30);
        border-radius: 140px;
        color: #fff;
        font-size: 36px;
        font-weight: 600;
    }

    .lgn_dlbtn_login {
        position: absolute;
        bottom: 110px;
        left: 50%;
        transform: translateX(-50%);
        width: 658px;
        height: 100px;
        border: none;
        background-color: rgba(0, 216, 212);
        border-radius: 140px;
        color: #fff;
        font-size: 36px;
        font-weight: 600;
    }

}
</style>
